<template>
  <div>
    <!-- v-if v-else-if， v-else适合v-if 配合使用，不需要写条件-->
    <h1 v-if="isLoading">loading</h1>
    <div v-else-if="!!users.length">
      <div class="card" v-for="user in users" :key="user.id">
        <a :href="user.html_url" target="_blank">
          <img :src="user.avatar_url" style="width: 100px" />
        </a>
        <p class="'card-text">{{ user.login }}</p>
      </div>
    </div>
    <h1 v-else>请输入用户名</h1>
  </div>
</template>

<script>
// 逻辑：点击收搜，loading就会先出现，数据请求成功之后展示数据
export default {
  name: "List",
  data() {
    return {
      users: [],
      isLoading: false,
    };
  },
  mounted() {
    this.$bus.$on("isShowLoading", this.isShowLoading);
    this.$bus.$on("addUsers", this.addUsers);
  },
  beforeDestroy() {
    this.$bus.$off("isShowLoading", this.isShowLoading);
    this.$bus.$off("addUsers", this.addUsers);
  },
  methods: {
    isShowLoading(val) {
      this.isLoading = val;
    },
    // 等到数据插入到users里
    addUsers(users) {
      this.users = users;
    },
  },
};
</script>

<style>
.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #dfeefe;
  text-align: center;
}
.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}
.card-text {
  font-size: 85%;
}
</style>